<template>
  <div style="padding: 30px; text-align:left;">
    <a-form
      :form="form"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 12 }"
      @submit="handleSubmit"
    >
      <a-form-item label="钱包密码">
        <a-input
          placeholder="请输入钱包密码, 钱包生成后请牢记钱包密码"
          v-decorator="[
            'password',
            {
              rules: [
                {
                  required: true,
                  message: '请输入钱包密码, 钱包生成后请牢记钱包密码!',
                },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit" :disabled="submitting">
          {{ buttonText }}
        </a-button>
      </a-form-item>
    </a-form>

    <a-descriptions
      bordered
      size="small"
      title="Wallet INFO"
      :column="1"
      v-if="wallet.address"
    >
      <a-descriptions-item label="Address" >
        <div style="text-align:left;"></div>
        {{ wallet.address }}
        <a-icon type="copy" @click="copy(wallet.address)"/>
      </a-descriptions-item>
      <a-descriptions-item label="Public Key">
        <div style="text-align:left;">
          {{ wallet.publicKey }}
          <a-icon type="copy" @click="copy(wallet.publicKey)"/>
        </div>

      </a-descriptions-item>
      <a-descriptions-item label="Private Key">
        <div style="text-align:left;">
          {{ wallet.privateKey }}
          <a-icon type="copy" @click="copy(wallet.privateKey)"/>
        </div>

      </a-descriptions-item>
      <a-descriptions-item label="Keystore">
        <div style="max-width: 100%; word-break: break-all; text-align:left;">
          {{ wallet.keystore }}
          <a-icon type="copy" @click="copy(wallet.keystore)"/>
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script>
import Constant from "../utils/Constant";
import Mixin from "../components/Mixin.vue";
export default {
  mixins: [Mixin],
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      wallet: {
        address: null,
        publicKey: null,
        privateKey: null,
        keystore: null,
      },
      submitting: false,
      buttonText: "生成钱包",
    };
  },
  created() {
    console.log("created");
    this.$eventbus.$emit("selectMenu", { name: "Wallet"});
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          this.submitting = true;
          this.buttonText = "钱包生成中 ... ";
          this.generateWallet(values.password);
        }
      });
    },
    handleSelectChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`,
      });
    },
    generateWallet(password) {
      let params = {};
      params.password = password;
      let url = Constant.ACCOUNT_WALLET_URL;

      this.$http.post(url, params).then(
        (resp) => {
          // console.log(resp);
          if (resp.data.code === "01") {
            this.wallet = resp.data.result;
            this.$set(this.wallet, "address", resp.data.result.address);
            this.$set(this.wallet, "privateKey", resp.data.result.privateKey);
            this.$set(this.wallet, "publicKey", resp.data.result.publicKey);
            this.$set(this.wallet, "keystore", resp.data.result.keystore);
          } else {
            this.$message.error(resp.data.message);
          }
          this.submitting = false;
          this.buttonText = "生成钱包";
        },
        (err) => {
          console.log(err);
          this.submitting = false;
          this.buttonText = "生成钱包";
        }
      );
    },
  },
};
</script>
